<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我们</title>
</head>
<body>
<section class="contacts">
    <h2 id="title8">联系我们</h2>
    <p>叮叮书店成立于1980年6月，是由教育部主管，清华大学主办的综合出版单位，植根于“川旅”这座久负盛名的高等学府。</p>
    <form action="#" method="get" autocomplete="off">
        <fieldset class="contact-form">
            <legend class="subtitle">需要填写以下内容</legend>
            <div class="form-row">
                <label class="contact">
                    <strong>姓名：</strong>
                    <input type="text" name="name" id="name" autofocus="autofocus" placeholder="必填" required="required" class="contact-input">
                </label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>性别：</strong></label>
                <label>男<input type="radio" name="sex" value="男" id="sex1" checked="checked"></label>
                <label>女<input type="radio" name="sex" value="女" id="sex2"></label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>年龄范围：</strong>
                    <select name="age">
                        <option value="1">18岁以下</option>
                        <option value="2" selected="selected">18岁-28岁</option>
                        <option value="3">28岁-38岁</option>
                        <option value="4">38岁-48岁</option>
                        <option value="5">48岁以上</option>
                    </select>
                </label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>爱好：</strong></label>
                <label><input type="checkbox" name="interest" id="interest1" value="网络">网络</label>
                <label><input type="checkbox" name="interest" id="interest2" value="数据库">数据库</label>
                <label><input type="checkbox" name="interest" id="interest3" value="编程">编程</label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>电子邮箱：</strong></label>
                <input type="email" name="email" id="email" placeholder="必填" class="contact-input">
            </div>
            <div class="form-row">
                <label class="contact"><strong>固定电话：</strong></label>
                <input type="text" name="telephone" id="telephone" placeholder="必填" pattern="[0-9]" required="required" class="contact-input">
            </div>
            <div class="form-row">
                <label class="contact"><strong>公司：</strong></label>
                <input type="text" name="company" id="company" required="required" placeholder="必填" class="contact-input">
            </div>
            <div class="form-row">
                <label class="contact"><strong>内容：</strong>
                    <textarea name="content" id="content" cols="20" rows="3" class="contact-input"></textarea>
                </label>
            </div>
            <div class="form-row">
                <input type="reset" value="取消" class="send">
                <input type="submit" value="提交" class="send">
            </div>
        </fieldset>
    </form>
</section>
</body>
</html>